import React, { Component } from 'react';
import { connect } from 'react-redux';
import { withRouter } from 'react-router-dom';

import {
    DetailWrapper,
    Header,
    Content,
} from './style';
import { actionCreators } from './store';


class Detail extends Component {

    componentDidMount() {
        const id = this.props.match.params.id;
        this.props.handleInitDetail(id);
    }


    render() {
        const { title, content } = this.props;
        return (
            <DetailWrapper>
                <Header>{title}</Header>
                <Content dangerouslySetInnerHTML={{__html: content}} />
            </DetailWrapper>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        title: state.getIn(["detail", "title"]),
        content: state.getIn(["detail", "content"])
    };
}

const mapDispatchToProps = (dispatch) => {
    return {
        handleInitDetail(id) {
            dispatch(actionCreators.initDetail(id));
        }
    };
}

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(Detail));